<template>
  <div :class="{ 'w-content-box': contentBox }" class="com-global-tableview-search-bar">
    <w-search-bar :types="types" :search-bar-options="searchBarOptions" />
    <w-table-view :list-data="listData">
      <template v-slot="scope">
        <w-cell
          :icon="scope.item[iconName]"
          :title="scope.item[titleName]"
          :describe="scope.item[describeName] | DateFormat"
          :describe1="scope.item[describe1Name] | DateFormat"
          :detail="scope.item[detailName]"
          :operation-width="option ? 100 : 0"
          @cellClick="cellClick(scope.item)"
        >
          <template v-if="option" slot="option">
            <a-button type="primary" size="small" @click.stop="editBtnClick(scope.item)">
              编辑
            </a-button>&nbsp;
            <a-button type="danger" size="small" @click.stop="removeBtnClick(scope.item)">
              删除
            </a-button>
          </template>
        </w-cell>
      </template>
    </w-table-view>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import WSearchBar from '@/components/global/searchBar/option-key'
import WCell from '@/components/global/cell/cell_00'
import WTableView from '@/components/global/tableview/customCell'

@Component({
  name: 'ComGlobalTableviewSearchBar',
  components: {
    WSearchBar,
    WCell,
    WTableView
  }
})
export default class ComGlobalTableviewSearchBar extends Vue {
  @Prop({ type: Array, default: () => [] }) types!: Array<any>;
  @Prop({ type: Array, default: () => [] }) searchBarOptions!: Array<any>;
  @Prop({ type: Object, default: () => {} }) listData!: any;
  @Prop({ type: String, default: '' }) iconName!: string;
  @Prop({ type: String, default: '' }) titleName!: string;
  @Prop({ type: String, default: '' }) describeName!: string;
  @Prop({ type: String, default: '' }) describe1Name!: string;
  @Prop({ type: String, default: '' }) detailName!: string;
  @Prop({ type: String, default: '' }) detailPath!: string;
  @Prop({ type: Boolean, default: true }) contentBox!: boolean;
  @Prop({ type: Boolean, default: false }) option!: boolean;
  @Prop({ type: String, default: '' }) removeUrl!: string;
  @Prop({ type: String, default: '' }) editApi!: string;

  /**
   * cell 点击
   */
  cellClick (item: any) {
    window.open(`${this.detailPath}/${item._id}`)
  }

  /**
   * 删除按钮点击
   */
  removeBtnClick (item: any) {
    this.$wRemovePop(() => {
      return this.$wAxios.$delete(`${this.removeUrl}${item._id}`)
    }, item.title).then(() => {
      this.$emit('reload')
    })
  }

  /**
   * 编辑按钮点击
   */
  editBtnClick (item: any) {
    this.$router.push({ path: this.editApi, query: { id: item._id } })
  }
}
</script>

<style scoped lang="less">
.com-global-tableview-search-bar {
  .page-box {
    margin: 20px;
  }
}
</style>
